<!-- 图标认证页面 -->
<template>
	<view class="approve">
		<!-- 图片和认证服务 -->
		<view class="picture">
			<image
				src="https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/22a057dd0960e9d49beecbce44afaeaf.png">
			</image>
			<text>{{ $t('请选择您需要的认证服务') }}</text>
		</view>
		<!-- 图标认证 -->
		<view class="authentication">
			<ol>
				<li v-for="(item, index) in list" :key="index" @click="isShow(item)">
					<image :src="item.image" mode=""></image>
					<text style="word-break: break-all; flex: 1;">{{ item[$t('item.title')] }}</text>
				</li>
			</ol>
			<view class="button">
				<u-button @click="service" :custom-style="customStyle" hover-class="none" type="primary">
					<text class="service">{{ $t('联系客服') }}</text>
				</u-button>
			</view>
		</view>
		
		
		<!-- 弹窗 -->
		<u-mask :show="show" >
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="tap">
						<p style="text-align: center;">
							<image mode="" :src='serverImageUrl("/static/images/user/tubiaorenzheng/chenggong 2.png")'></image>
						</p>
						<p class="text-1">{{ $t('温馨提示') }}</p>
						<p class="text-2">{{ rect }}</p>
						<p class="text-3">{{ $t('认证流程') }}</p>
						<view class="flow">
							<view class="flow_text">
								<text>1,</text>
								{{ $t('与客服联系，获取该图标认证所需信息') }}
							</view>
							<view class="flow_text">
								<text>2,</text>
								{{ $t('选择您需要的认证服务') }}
							</view>
							<view class="flow_text">
								<text>3,</text>
								{{ $t('填写该图标认证信息') }}
							</view>
							<view class="flow_text">
								<text>4,</text>
								{{ $t('详细资料可在详情中进行说明') }}
							</view>
						</view>
					</view>
					<!-- 俩个按钮 -->
					<view class="switch">
						<view class="cancel">
							<view class="_button" @click="show = false">
								<text class="cancel">{{ $t('取消') }}</text>
							</view>
						</view>
						<view class="affirm">
							<view class="_button" @click="to">
								<text class="affirm">{{ $t('确认') }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />
		<authNamePopup v-if="authShow" :show="authShow" @change="clickAuthPopup"></authNamePopup>
	</view>
</template>

<script>
	import {
		getIconList
	} from '../../../api/basic.js'
	import {
		IMAGE_URL
	} from '../../../config/app.js'
	import vipPopup from "@/components/vipPopup/index.vue";
	import {
		createC2CConversation
	} from "@/common/public"
	import authNamePopup from "@/components/authNamePopup/authNamePopup.vue";
	export default {
		components: {
			vipPopup,
			authNamePopup
		},
		data() {
			return {
				affirm: { //弹窗确认按钮样式
					width: '122rpx',
					'min-height': '45rpx',
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '9rpx',
				},
				cancel: { //弹窗取消按钮样式
					width: '122rpx',
					'min-height': '45rpx',
					background: '#F5F5F5',
					'border-radius': '9rpx',
				},
				show: false, //弹窗
				customStyle: {
					width: '656rpx',
					height: '63rpx',
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '26rpx',
				},
				list: [],
				rect: '', //弹窗里的认证内容
				typeId: 0,

				vipShow: false,
				//后台开关验证 vip权限
				vip: false,

				customer: '',
				isAuthName: false,
				authShow: false,

				lang: getApp().globalData.lang,

			}
		},
		onLoad() {

			if (this.lang === 'zh') {
				this.customer = getApp().globalData.site.im_customer001
			} else {
				this.customer = getApp().globalData.site.im_customer002
			}


			this.$u.api.basic.getIconList().then(res => {
				console.log(res);
				this.list = res
				this.list.forEach((item, index) => {
					item.image = IMAGE_URL + item.image
				})
				// this.rect = this.list[0].content
				this.rect = this.list[0][this.$t('item.content')]
			})
			this.lang = uni.getStorageSync('lang')
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("图标认证")
			})
		},
		onShow() {
			this.getUserAuth() // 获取用户权限
			this.$u.api.user.appCheck().then(res => {
				this.report = res.report
				this.vip = res.vip
			})

			/* 验证是否实名认证 */
			this.$u.api.user.getUserAudit().then(res => {
				this.isAuthName = res.status == 2; //status !=2都是未实名认证的
			})
		},
		methods: {
			districts(val) {
				return val.length > 6 ? val.slice(0, 5) + "..." : val
			},
			getUserAuth() {
				const that = this
				that.$u.api.user.getUserAuth().then(res => {
					that.auth = res
				})
			},
			isShow(i) {
				console.log(i)
				var that = this
				this.rect = i[this.$t('item.content')]
				if (this.lang === 'ru') {
					this.show = true
					this.typeId = i.id
				} else {
					if (i.is_vip === '1') { // 需要VIP
						if (that.auth.auth) {
							if (that.auth.auth.indexOf("icon") === -1) { // 非会员不能提交
								if (that.vip) {
									that.vipShow = true // 弹出vip购买弹窗
									return
								} else {
									uni.showModal({
										content: that.$t('您的权限不足哦!请联系工作人员!'),
										showCancel: false,
										confirmText: that.$t('是'),
									})
									return false;
								}
								// 弹出vip购买弹窗
								return false
							} else {
								if (!this.isAuthName) {
									this.authShow = true;
									return false;
								} else {
									this.show = true
									this.typeId = i.id
								}
							}
						} else {
							if (that.vip) {
								that.vipShow = true // 弹出vip购买弹窗
								return
							} else {
								uni.showModal({
									content: that.$t('您的权限不足哦!请联系工作人员!'),
									showCancel: false,
									confirmText: that.$t('是'),
								})
								return false;
							}
						}
					} else {
						this.show = true
						this.typeId = i.id
					}
				}
			},
			to() {
				this.show = false
				this.$u.route({
					url: 'pages/user/Icon-authentication/Icon-authentication',
					params: {
						id: this.typeId
					}
				})
			},
			clickVipPopup() {
				this.vipShow = false
			},
			clickAuthPopup(e) {
				this.authShow = false
			},
			service() {
				createC2CConversation(this.customer, this, true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}

	.approve {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f9f9f9;
	}

	.picture {
		width: 100%;
		height: 418rpx;
		padding: 10rpx 20rpx 0 22rpx;
		background: white;

		image {
			width: 100%;
			height: 324rpx;
			float: left;
			margin-bottom: 24.5rpx;
		}

		text {
			font-size: 24rpx;

			font-weight: 600;
			color: #000000;
			line-height: 35rpx;
		}
	}

	.authentication {
		padding-top: 17rpx;
		flex: 1;
		background: #f9f9f9;
		overflow: scroll;
	}

	ol {
		list-style-type: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		li {
			display: flex;
			align-items: center;
			width: 323rpx;
			height: 143rpx;
			background: #FFFFFF;
			box-shadow: 2rpx 3rpx 7rpx 0rpx rgba(205, 205, 205, 0.5);
			border-radius: 14rpx;
			margin-bottom: 17rpx;

			image {
				margin-left: 27rpx;
				width: 75rpx;
				height: 75rpx;
			}

			text {
				margin-left: 24rpx;
				font-size: 24rpx;
				padding: 0px 5px;
				font-weight: 400;
				color: #000000;
				line-height: 35rpx;
			}
		}
	}

	.service {
		font-size: 24rpx;

		font-weight: 600;
		color: #FFFFFF;
		line-height: 35rpx;
	}

	.button {
		margin-top: 30rpx;
		margin-bottom: 92rpx;
		text-align: center;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		overflow: hidden;
	}

	.rect {
		padding: 38rpx 40rpx 38rpx 41rpx;
		width: 470rpx;
		min-height: 574rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		word-break: break-all;
		display: flex;
		flex-direction: column;

		image {
			width: 75rpx;
			height: 69rpx;
		}

		.text-1 {
			margin-top: 10rpx;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 20rpx;
			color: #2D2D2D;
			text-align: center;
		}

		.text-2 {
			margin-top: 12rpx;
			font-size: $my-font-size21;
			font-weight: 600;
			line-height: 30rpx;
			color: #2D2D2D;
			text-align: center;
		}

		.text-3 {
			font-size: $my-font-size21;
			font-weight: 600;
			color: #070707;
			line-height: 30rpx;
			margin-top: 22rpx;
		}

		.flow {
			margin-top: 13rpx;
			display: flex;
			flex-direction: column;
			font-size: 21rpx;
			font-weight: 400;
			color: #7C7C7C;
			line-height: 37rpx;
		}
	}

	.flow_text {
		display: flex;
	}


	.switch {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		font-size: $my-font-size21;
		font-weight: 600;
		line-height: 30rpx;
		margin-top: 20rpx;

		.affirm {
			background: linear-gradient(110deg, rgb(221, 41, 16) 0%, rgb(247, 155, 41) 100%);
			width: 122rpx;
			min-height: 45rpx;
			border-radius: 10rpx;
			// line-height: 60rpx;
			color: #FFFFFF;
			padding: 3rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

		.cancel {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 3rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			width: 122rpx;
			overflow: hidden;
			min-height: 45rpx;
			background: #F5F5F5;
			color: #000000;
			text-align: center;
		}

		._button {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>